<!-- 3：www.bdqn.cn首页的轮播效果，其他不做。每秒钟切换一次，
图片是链接，通过定位把原点定位到上面，注意效果。
当鼠标放在图片上时，图片停止切换，移走继续切换 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bdqn轮播</title>
		<style>
			#d {
				list-style-type: none;
				display: flex;
				margin-top: -36px;
				margin-left: 180px;

			}

			button {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				margin-left: 6px;
				border: none;
			}

			div img {
				width: 1520PX;
				height: 350PX;
			}

			ul {
				/* padding: auto; */
				padding-left: 500px;
			}
		</style>

		<script>
			var im = ["image/1.png", "image/2.jpg", "image/3.jpg", "image/4.png"];
			var aa = ["https://zhiye.jb-aptech.com.cn/", "https://www.bdqn.cn/news/202108/23457.shtml",
				"https://www.bdqn.cn/news/201301/7361.shtml", "https://live.bilibili.com/22183128"
			]
			var i = 0;
			var js = setInterval(function() {
				var di = document.getElementById("d");
				di.children[i].firstElementChild.style.backgroundColor = "white";
				i++;
				if (i >= aa.length) {
					i = 0;
				}
				di.children[i].firstElementChild.style.backgroundColor = "orange";
				document.getElementById("aw").href = aa[i];
				document.getElementById("aw").children[0].src = im[i];

			}, 1000);

			function over() {
				clearInterval(js);
			}

			function shiftImg(index) {
				clearInterval(js);
				var di = document.getElementById("d");
				di.children[i].firstElementChild.style.backgroundColor = "white";

				i = index;
				document.getElementById("aw").children[0].src = im[i];

				di.children[i].firstElementChild.style.backgroundColor = "orange";

			}

			function out() {
				js = setInterval(function() {
					var di = document.getElementById("d");
					di.children[i].firstElementChild.style.backgroundColor = "white";
					i++;
					if (i >= aa.length) {
						i = 0;
					}
					di.children[i].firstElementChild.style.backgroundColor = "orange";
					document.getElementById("aw").href = aa[i];
					document.getElementById("aw").children[0].src = im[i];

				}, 1000);
			}
		</script>
	</head>
	<body>
		<div>
			<a id="aw" href=""><img src="image/1.png" alt="" onmouseover="over()" onmouseout="out()"></a>
			<ul id="d">
				<li><button onmouseover="shiftImg(0)" onmouseout="out()" style="background-color: orange;"></button>
				</li>
				<li><button onmouseover="shiftImg(1)" onmouseout="out()"></button></li>
				<li><button onmouseover="shiftImg(2)" onmouseout="out()"></button></li>
				<li><button onmouseover="shiftImg(3)" onmouseout="out()"></button></li>
				<!-- <li><button onmouseover="shiftImg(4)" onmouseout="out()"></button></li> -->
			</ul>
		</div>
	</body>
</html>
